<template>
	<div class="main">
		<h2>按钮组件</h2>
		<h3>基本使用</h3>
		<Button type="primary" @click="handleClick">主要按钮 </Button>
		<Button type="success">成功按钮 </Button>
		<Button type="warning" size="mini">警告按钮 </Button>
		<h3>圆角</h3>
		<Button :circle="10">圆角</Button>
		<h3>加载状态</h3>
		<Button :loading="true">旋转按钮</Button>
		<Button type="warning" loading>旋转按钮</Button>

		<h2>输入框组件</h2>
		<h3>基本使用</h3>
		<!-- 給组件或者元素传递v-model，相当于传递一个了value属性和修改value属性的input事件 -->
		<Input v-model="name" limit :maxlength="10" data-index="1" />
		<p></p>
		<Input type="textarea" v-model="name" limit :maxlength="10" />
		<p></p>
		<Input clearable />
	</div>
</template>

<script>
import Button from "~/button.vue";
import Input from "~/input.vue";

export default {
	data() {
		return {
			name: "",
		};
	},
	watch: {
		name() {
			// console.log("name的值等于" + this.name);
		},
	},
	components: {
		Button,
		Input,
	},
	mounted() {
		// this.$message("弹窗的内容", "标题", {
		// 	type: "success",
		// })
		// 	.then(() => {
		// 		console.log("点击了确定按钮");
		// 	})
		// 	.catch(() => {
		// 		console.log("点击了取消按钮");
		// 	});
	},
	methods: {
		handleClick() {
			/**
			 * 1.$message 挂载在vue的原型上
			 * 2.$message 返回一个promise，并且会调用打开组件
			 * 3.组件的按钮事件的处理
			 */
			this.$message("弹窗的内容", "标题", {
				type: "warning",
			});
			// .then(() => {
			// 	console.log("点击了确定按钮");
			// })
			// .catch(() => {
			// 	console.log("点击了取消按钮");
			// });
		},
	},
};
</script>

<style>
</style>